<template>
  <div>
    <Row :space="10">
      <div class="h-input-group">
        <input type="text" placeholder="中文名" v-model="paramModel.name" />
        <span class="h-input-addon">-</span>
        <input type="text" placeholder="标签名" v-model="paramModel.keyName" />
      </div>
    </Row>
    <Row :space="10">
      <Cell width="12">
        <AutoComplete :option="param" placeholder="标签值" :must-match="false" :datas="paramAutoData" v-model="paramModel.keyValue" type="key" @change="valueChange"></AutoComplete>
      </Cell>
      <Cell width="12">
        <Select v-model="paramModel.sourceId" placeholder="数据源" :datas="sourceData" @change="selectChange"></Select>
      </Cell>
    </Row>
    <br />
    <DropdownCustom ref="dropdown" trigger="contextMenu" :toggleIcon="false">
      <div>
        <Table :datas="params" :selectRow="true" align="center" @rowSelect="rowSelect" :height="300">
          <TableItem title="中文名" prop="name"></TableItem>
          <TableItem title="标签名" prop="keyName"></TableItem>
          <TableItem title="标签值" prop="keyValue"></TableItem>
          <TableItem title="数据源" prop="sourceId" :render="sourceRender"></TableItem>
        </Table>
      </div>
      <div slot="content">
        <Button @click="paramRemove">删除</Button>
      </div>
    </DropdownCustom>
    <br />
    <br />
    <Row>
      <Button :block="true" text-color="primary" @click="submit">确认</Button>
    </Row>
    <br />
    <Row>
      <div>
        <div class="text-left bottom-line" style="font-size:8px;padding:5px;">
          <span class="primary-color" @click="copyText">$SYSTEMID</span>&nbsp;&nbsp;<span>生成唯一ID：雪花算法</span>
        </div>
        <div class="text-left bottom-line" style="font-size:8px;padding:5px;">
          <span class="primary-color" @click="copyText">$DATE-14</span>&nbsp;&nbsp;<span>获取日期格式：2006-01-02 15:04:05</span>
        </div>
        <div class="text-left bottom-line" style="font-size:8px;padding:5px;">
          <span class="primary-color" @click="copyText">$DATE-8</span>&nbsp;&nbsp;<span>获取日期格式：2006-01-02</span>
        </div>
        <div class="text-left bottom-line" style="font-size:8px;padding:5px;">
          <span class="primary-color" @click="copyText">$DATE14</span>&nbsp;&nbsp;<span>获取日期格式：20060102150405</span>
        </div>
        <div class="text-left bottom-line" style="font-size:8px;padding:5px;">
          <span class="primary-color" @click="copyText">$DATE8</span>&nbsp;&nbsp;<span>获取日期格式：20060102</span>
        </div>
        <div class="text-left bottom-line" style="font-size:8px;padding:5px;">
          <span class="primary-color" @click="copyText">$TIME-6</span>&nbsp;&nbsp;<span>获取时间格式：15:04:05</span>
        </div>
        <div class="text-left bottom-line" style="font-size:8px;padding:5px;">
          <span class="primary-color" @click="copyText">$TIME6</span>&nbsp;&nbsp;<span>获取时间格式：150405</span>
        </div>
      </div>
    </Row>
  </div>
</template>
<script>
import { cloneDeep } from "lodash";

export default {
  data() {
    return {
      params: [],
      paramModel: {
        name: "",
        keyName: "",
        keyValue: "",
        sourceId: "",
      },
      datas: [],
      paramAutoData: [],
      sourceData: [],
      rowData: {},
      param: {
        keyName: "keyId",
        titleName: "title",
      },
    };
  },
  methods: {
    rowSelect(data) {
      this.rowData = data;
    },
    paramRemove() {
      this.$refs.dropdown.hide();
      this.params = this.params.filter((node, i) => {
        if (node.keyName === this.rowData.keyName) {
          delete this.params[i];
          this.rowData = {};
          return false;
        }
        return true;
      });
      this.$emit("setParams", this.params);
    },
    submit() {
      try {
        if (!!this.paramModel.keyValue.title) {
          this.paramModel.keyValue = this.paramModel.keyValue.title;
        }
      } catch {}

      this.params.push(JSON.parse(JSON.stringify(this.paramModel)));
      this.$emit("setParams", this.params);
      this.keyName = "";
      this.keyValue = "";
      this.name = "";
    },
    paramsInit(datas, data) {
      if (!!data) {
        this.params = data;
      }
      if (!!datas) {
        this.datas = datas;
        this.sourceData = [];
        datas.nodeList.forEach((item) => {
          this.sourceData.push({ keyId: item.id, title: item.name });
        });
      }
    },
    sourceRender(data) {
      var name;
      this.sourceData.filter((item) => {
        if (item.keyId == data.sourceId) {
          name = item.title;
          return false;
        }
        return true;
      });
      return name;
    },
    selectChange(data) {
      if (!!data) {
        this.datas.nodeList.filter((item) => {
          if (item.id == data.keyId) {
            this.paramAutoData = [];
            item.params.forEach((line) => {
              this.paramAutoData.push({
                keyId: line.keyName,
                title: line.name,
              });
            });
            return true;
          }
        });
      }
    },
    valueChange(data) {
      console.log(data);
      if (!!data) {
        if (!!data.key) {
          this.paramModel.keyName = data.key;
        }
        if (!!data.title && !!data.key) {
          this.paramModel.name = data.title;
        }
      }
    },
    copyText(e) {
      this.$Clipboard({
        text: e.target.innerText,
      });
    },
  },
  deactivated() {
    this.$destroy(true);
  },
};
</script>
